<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>分类</title>
    <link rel="stylesheet" href="../css/common.css">
    <link rel="stylesheet" href="../css/fenlei.css">
    <script src="../js/jquery-3.2.1.min.js"></script>
    <script src="../js/media.js"></script>
    <script src="../js/common.js"></script>
    <style>
   .fenlei{
   	padding: 0px !important;
   }
    </style>
</head>

<body>

    <div class="fenlei bc-gray">
      
        <div class="bottom clearfix" style="margin-top: 0px !important;">
            <div class="left">
                <ul>
                    <li v-html='item.firstTypeDiscribe' v-for='item in first_name' >
                    </li>
                </ul>
            </div>
            <div class="right">
                <div class="section1 section0" v-for='item in first_name'>
                    <div>
                        <h6>{{item.firstTypeDiscribe}}</h6>
                        <ul>
                            <li v-for='items in item.lpst' @click='click_link(this)'>
                                <img :src="items.typeImages" alt="图片加载失败">
                                <p v-html='items.secondTypeDiscibe'></p>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--底部-->
    <div class="public-footer flex">
        <div class="button-1" onclick="javascript:window.location.href='../index.html'">
            <span></span>
            <p>首页</p>
        </div>
        <div class="button-2 active">
            <span></span>
            <p>分类</p>
        </div>
        <div class="button-3" onclick="javascript:window.location.href='../page/Excellent-shop.html'">
            <span></span>
            <p>店铺</p>
        </div>
        <div class="button-4" onclick="nextMy()">
            <span></span>
            <p>我的</p>
        </div>
    </div>
    <script src='../js/vue.js'></script>
    <script src='../js/vue-resource.min.js'></script>
    <script src="../js/public.js" type="text/javascript" charset="utf-8"></script>
    <script>
    var firstTypeId = sessionStorage.firstTypeId;
    var left_index = sessionStorage.left_index;
        function nextMy (){
            if(localStorage.getItem("mytype") == 1){
                window.location.href = "../wode/Sellers-center.html";
            }else{
                window.location.href='../wode/my-page.html';
            }
        }
        new Vue({
            el: 'body',
            data: {
                thisurl: base_url + 'ZITAOHUI/produceType',
                datas: [],
            },
            ready: function () {
                this.$http.get(this.thisurl)
                    .then((response) => {
                        //console.log(response);
                        var all_data = response.data.extend.list;
                        var arr = [];
                        for (var i = 0; i < all_data['一级标题'].length; i++) {
                            arr.push(all_data['一级标题'][i].lpst)
                        }
                        this.$set('first_name', all_data['一级标题'])
                        this.$set('second_name', arr)
                        //console.log(this.first_name);
                        //console.log(this.second_name);
                        setTimeout(function () {
                            if(isNull(left_index)){
						    	//console.log('第一次进入分类；');
						    	$('.fenlei .bottom .left li').eq(0).addClass('active');
                            	$('.fenlei .bottom .right .section0').eq(0).addClass('active');
						    }else{
						    	//console.log('返回的分类；');
						    	$('.fenlei .bottom .left li').eq(left_index).addClass('active');
						        $('.fenlei .bottom .right .section0').eq(left_index).addClass('active');
						    }
                            $('.fenlei .bottom .left li').click(function () {
                                $(this).addClass('active').siblings().removeClass(
                                    'active');
                                var idx = $(this).index();
                                $('.fenlei .bottom .right .section0').eq(idx).addClass(
                                    'active').siblings().removeClass('active');
                            })
                        }, 100)
                    }, (response) => {
                        console.log('数据出错')
                    }).catch(function (response) {
                        console.log(response)
                    })
            },
            methods: {
                click_link: function (t) {
                    console.log(t);
                    var left_index = $('.active').index();
                    sessionStorage.left_index = left_index;
                    window.location.href = '../page/A-classification.html' + '?firstTypeId=' + t.item.firstTypeId +
                        '&secondTypeId=' + t.items.secondTypeId+'&s_name='+t.items.secondTypeDiscibe
                },
                load: function (a) {
                    console.log(a)
                }
            }
        })
    </script>
</body>

</html>